<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<style>
.tab {
	margin-bottom: 0px;
	margin-top: 6px;
}

.tab>li>a {
	line-height: 22px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.tab-content {
	border: 1px solid #E3E3E3;
	border-radius: 0px 0px 4px 4px;
	border-top: none;
	padding: 2px;
}

.table [valign="top"] {
	vertical-align: top;
}

#newOrder div[id^=m] {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	margin: 2px;
	padding: 2px;
	line-height: 25px;
	float: left;
	width: 45%;
	min-height: 225px;
}

#newOrder div[id^=m] span {
	float: left;
}

.title {
	width: 60px;
	margin-left: 20px;
}
</style>
<ul class="nav nav-tabs tab tBlock">
	<li class="active">
		<a title="退货订单" deny="not" class="nFocus" href="#newOrder" data-toggle="tab">
			<i class="icon-share-alt"></i>
			我要退货
		</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="newOrder">
		<form id="inputForm" class="form-inline" action="${ctx}/adoms/returns/returns" method="post">
			<input type="hidden" name="id" value="${order.id}" />
			<input type="hidden" name="type" value="0" />
			<table class="table table-striped table-bordered table-condensed">
				<tr>
					<td class="span2">收货部门:</td>
					<td><select id="departmentTarget" name="departmentTarget.id">
							<option id="dPlz">请选择...</option>
							<c:forEach items="${dList }" var="d" varStatus="index">
								<option value="${d.id }">${index.index + 1}.${d.name }</option>
							</c:forEach>
						</select></td>
				</tr>
				<tr>
					<td class="span2">退货商品:</td>
					<td><select id="marchandise" name="marchandise.id">
							<option id="plz">请选择...</option>
							<c:forEach items="${mList }" var="m" varStatus="index">
								<option value="${m.id }">${index.index + 1}.${m.name }</option>
							</c:forEach>
						</select></td>
				</tr>
				<tr>
					<td class="span2" valign="top">商品详情:</td>
					<td><i class="icon-eye-open"></i> <a id="idShow" deny="not">显示商品详情</a>
						<div id="eyeInfo" class="hide">
							<c:forEach items="${mList }" var="m" varStatus="index">
								<div class="hide" id="m${m.id }">
									<span class="title">商品名称：</span>
									<span class="span3" mName="mName">${index.index + 1}.${m.name }</span>
									<br />
									<span class="title">商品编号：</span>
									<span class="span3">${m.code }</span>
									<br />
									<span class="title">单价：</span>
									<span class="span3 tBlue">
										<span mprice="mPrice">${m.price }</span>
										元
									</span>
									<br />
									<span class="title">规格：</span>
									<span spcification="spcification" class="span3">${m.spcification }</span>
									<br />
									<span class="title">每件数量：</span>
									<span numOfBox="numOfBox" class="span3">${m.numOfBox } ${m.packageing }</span>
									<br />
									<span class="title">商品条码：</span>
									<span class="span3">${m.barCode }</span>
									<br />
									<span class="title">品牌：</span>
									<span class="span3">${m.brand.name }</span>
									<br />
									<span class="title">产地：</span>
									<span class="span3">${m.producePlace }</span>
									<br />
									<span class="title">保质期：</span>
									<span class="span3">${m.shelflife } 月</span>
									<br />
									<span class="title">商品描述：</span>
									<span class="span3">${m.description }</span>
									<br />
								</div>
							</c:forEach>
						</div></td>
				</tr>
				<tr>
					<td>退货详情：</td>
					<td>
						<div style="width: 100%;">
							<table style="margin: auto; width: 100%;" class="table-striped table-bordered table-condensed">
								<tbody>
									<tr>
										<th>商品名称</th>
										<th>单价(元)</th>
										<th>规格</th>
										<th>件数</th>
										<th>每件数量</th>
										<th>数量</th>
										<th>总价(元)</th>
									</tr>
									<tr>
										<td id="mName"></td>
										<td class="tBlue"><span id="mPrice" class="tRed">0.00</span>
										<td id="spcification"></td>
										<td><input id="boxNum" name="boxNum" type="text" class="span1" />(件)</td>
										<td id="numOfBox"></td>
										<td><input class="span1" id="goodsNumber" name="items" type="text" value="" size="30" maxlength="4" /></td>
										<td><input id="totalCost" readonly="readonly" class="span2" name="totalPrice" type="text" value="0.00" size="30" maxlength="8" /></td>
									</tr>
								</tbody>
							</table>
						</div>
					</td>
				</tr>
				<tr>
					<td class="span2">退单名称:</td>
					<td><input id="name" class="span4" name="name" type="text" value="${order.name}" size="30" maxlength="80" /></td>
				</tr>
				<tr>
					<td>联系电话:</td>
					<td><input id="phone" name="phone" type="text" value="${order.phone}" size="30" maxlength="80" /></td>
				</tr>
				<tr>
					<td>退货部门:</td>
					<td><span class="tBlue">${USER.department.name}</span> <input id="department" name="department.id" type="hidden" value="${USER.department.id}" size="30" maxlength="80" /></td>
				</tr>
				<tr>
					<td>联系人:</td>
					<td><span class="tBlue">${USER.name }</span> <input id="createUser" name="createUser" type="hidden" value="${USER.name }" size="30" maxlength="80" /></td>
				</tr>
				<tr>
					<td valign="top">退货原因:</td>
					<td><textarea id="memo" name="memo" rows="3" class="span6">${order.memo}</textarea></td>
				</tr>
				<tr>
					<td align="center" colspan="2"><input class="btn span2 btn-primary" disabled="disabled" type="submit" value="确认退货" /></td>
				</tr>
			</table>
		</form>
	</div>
</div>
<script>
	$(document).ready(function() {
		//为inputForm注册validate函数
		$("#inputForm").validate({
			rules : {
				totalCost : {
					required : true,
					number : true
				},
				phone : "required",
				receivedTime : "required",
				name : "required",
				orderChargeUser : "required",
				orderCreateTime : "required",
				status : "required",
				"department.id" : "required",
				departmentTarget : "required",
				createUser : "required",
				items : {
					required : true,
					number : true
				}
			}
		});
		//展示商品详情
		$("#idShow").toggle(function() {
			$("#eyeInfo").show("slow");
			$(this).html("隐藏商品详情");
			$(".icon-eye-open").attr("class", "icon-eye-close");
		}, function() {
			$(".icon-eye-close").attr("class", "icon-eye-open");
			$(this).html("显示商品详情");
			$("#eyeInfo").hide("slow");
		});
		//
		$("#marchandise").change(function() {
			try {
				var mid = $(this).val();
				$("div[id^=m]").hide();
				$("#m" + mid).show();
				$("#mPrice").html($("[mPrice]", $("#m" + mid)).html());
				$("#mName").html($("[mName]", $("#m" + mid)).html());
				$("#spcification").html($("[spcification]", $("#m" + mid)).html());
				$("#numOfBox").html($("[numOfBox]", $("#m" + mid)).html());
				$("#goodsNumber").keyup();
				$("#plz").remove();
			} catch (e) {
			}
		});
		$("#departmentTarget").change(function() {
			$("#dPlz").remove();
		});
		//计算总价
		$("#goodsNumber").keyup(function() {
			var number = parseInt($("#goodsNumber").val());
			var numOfBox = parseInt($("#numOfBox").text());
			try {
				$("#boxNum").val((number / numOfBox).toFixed(2));
			} catch (e) {
				console.log(e);
			}
			changeNum();
		});

		$("#boxNum").keyup(function() {
			var boxNum = parseFloat($(this).val());
			var numOfBox = parseInt($("#numOfBox").text());
			var goodsNumber = boxNum * numOfBox;
			$("#goodsNumber").val(goodsNumber);
			changeNum();
		});

		var changeNum = function() {
			var number = parseInt($("#goodsNumber").val());
			var price = parseFloat($("#mPrice").html());
			var cost = number * price;
			$("#totalCost").val(cost.toFixed(2));
			if (cost > 0) {
				$(":submit").removeAttr("disabled");
			}
		}
	});
</script>
<c:if test="${msg != null}">
	<script>
		msgAlert.show("${msg}");
	</script>
</c:if>